<template>
  <!-- 赛事发布 赛事基本项修改 -->
  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="pageWrap" v-loading="loading">
    <div class="head">基础信息</div>
    <el-row :gutter="18">
      <el-col :md="12" :sm="24">
        <el-form-item :label="mold=='S'?'赛事名称':'活动名称'" prop="name">
          <el-input v-model="ruleForm.name" style="width:90%"></el-input>
        </el-form-item>
      </el-col>
      <el-col :md="12" :sm="24">
        <el-form-item :label="mold=='S'?'赛事类型':'活动类型'" prop="type">
          <el-select v-model="ruleForm.type" placeholder="请选择活动区域" style="width:90%">
            <el-option v-for="(v,i) in typeArr" :key="i" :label="v.name" :value="v.type"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :md="12" :sm="24">
        <el-form-item label="起止时间" required style="height:40px;">
          <el-date-picker v-model="start_end_date" type="datetimerange" range-separator="至" start-placeholder="开始日期"
            end-placeholder="结束日期" style="width:90%;" value-format="yyyy/MM/dd HH:mm:ss" format="yyyy/MM/dd HH:mm:ss">
          </el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :md="12" :sm="24">
        <el-form-item :label="mold=='S'?'赛事地点':'活动地点'" prop="place">
          <el-cascader size="large" v-model="ruleForm.place" :options="AreaList" style="width:90%;"></el-cascader>
        </el-form-item>
      </el-col>
      <el-col :md="12" :sm="24">
        <el-form-item :label="mold=='S'?'赛事规模':'活动规模'" prop="scale">
          <el-input v-model="ruleForm.scale" style="width:90%"></el-input>
        </el-form-item>
      </el-col>
      <el-col :md="12" :sm="24">
        <el-form-item label="主办单位" prop="ponsor">
          <el-input v-model="ruleForm.ponsor" style="width:90%;"></el-input>
        </el-form-item>
      </el-col>
      <el-col :md="12" :sm="24">
        <el-form-item label="协办单位" prop="coSponsored">
          <el-input v-model="ruleForm.coSponsored" style="width:90%;"></el-input>
        </el-form-item>
      </el-col>
      <el-col :md="12" :sm="24">
        <el-form-item label="承办单位" prop="organizer">
          <el-input v-model="ruleForm.organizer" style="width:90%;"></el-input>
        </el-form-item>
      </el-col>
      <el-col :md="12" :sm="24">
        <el-form-item label="运营单位" prop="operation">
          <el-input v-model="ruleForm.operation" style="width:90%;"></el-input>
        </el-form-item>
      </el-col>
      <el-col :md="12" :sm="24" v-if="mold=='S'">
        <el-form-item label="举办次数" prop="conductCount">
          <el-input v-model="ruleForm.conductCount" style="width:90%;"></el-input>
        </el-form-item>
      </el-col>
      <el-col :md="12" :sm="24">
        <el-form-item label="logo" prop="region" style="height:182px;">
          <el-upload class="avatar-uploader" ref="upLogo" :action="upLoadUrl" :show-file-list="false"
            :on-success="(value)=> picSuccess(1, value)" :before-upload="(file)=> beforeUpload(1, file)" name="img">
            <img v-if="ruleForm.logo" :src="ruleForm.logo" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <span class="tips">注：请上传jpg格式，建议尺寸220*220 正方形</span>
        </el-form-item>
      </el-col>
      <el-col :md="12" :sm="24">
        <el-form-item label="宣传图" prop="region" style="height:182px;">
          <el-upload ref="upbanner" class="avatar-uploader" :action="upLoadUrl" :show-file-list="false"
            :on-success="(value)=> picSuccess(2, value)" :before-upload="(file)=> beforeUpload(2, file)" name="img">
            <img v-if="ruleForm.banner" :src="ruleForm.banner" class="avatar banner" />
            <i v-else class="el-icon-plus avatar-uploader-icon banner"></i>
          </el-upload>
          <span class="tips">注：请上传jpg格式，建议尺寸400*247 长方形</span>
        </el-form-item>
      </el-col>
      <!-- :md="12" :sm="24" -->
      <el-col>
        <el-form-item :label="mold=='S'?'赛事组别':'活动组别'" prop="region">
            <div v-for="(v,i) in ruleForm.matchInfo" :key="'t'+i" >
              <el-input v-model="v.name" style="width:calc(100% - 50px);margin-bottom:10px"></el-input>
              <el-button :key="'a'+i" type="primary" icon="el-icon-plus" circle style="float:right" v-if="i==0"
                @click="ruleForm.matchInfo.push({name:'',id:0})"></el-button>
              <el-button :key="'d'+i" type="danger" icon="el-icon-delete" circle style="float:right" v-else
                @click="ruleForm.matchInfo.splice(i,1)"></el-button>
            </div>
        </el-form-item>
      </el-col>
      <!-- 赛事延期通知 -->
      <el-col :md="12" :sm="24" v-if="mold=='S'">
        <el-form-item>
          <el-tooltip class="item" effect="dark" placement="bottom" slot="label">
            <div slot="content">
              开启延期：需首先发布延期内容公告，开启需绑定公告通知
              <br />如需设置退赛，请在报名管理=》退费设置中进行相关设置
              <br />用户可在小程序报名基本信息下方点击申请退款按钮发起退款
            </div>
            <span>
              是否延期
              <i class="el-icon-question"></i>
            </span>
          </el-tooltip>
          <el-switch v-model="ruleForm.ifDelayShow" active-text="开启延期" inactive-text="关闭延期" :active-value="1"
            :inactive-value="0" @change="delayChange"></el-switch>
        </el-form-item>
      </el-col>
      <!-- 延期说明 -->
      <el-col v-if="mold=='S'&&ruleForm.ifDelayShow==1">
        <el-form-item label="延期说明">
          <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容"
            v-model="ruleForm.delayInfo"></el-input>
        </el-form-item>
      </el-col>
      <!-- 活动成绩是否需要审核 默认需要 -->
      <el-col :md="12" :sm="24" v-if="mold=='H'">
        <el-form-item>
          <el-tooltip class="item" effect="dark" placement="bottom" slot="label">
            <div slot="content">
              开启审核：即第二天计算前一天距离用时等，加入成绩与排行中
              <br />关闭审核：即提交成功视为有效，直接计入成绩与排行中
            </div>
            <span>
              成绩审核
              <i class="el-icon-question"></i>
            </span>
          </el-tooltip>
          <el-switch v-model="ruleForm.ifGradeAudit" active-text="需要审核" inactive-text="不需审核" :active-value="1"
            :inactive-value="0"></el-switch>
        </el-form-item>
      </el-col>
      <!-- 打卡时间轴设置 默认关闭 -->
      <el-col :md="12" :sm="24" v-if="ruleForm.type=='J'">
        <el-form-item>
          <el-tooltip class="item" effect="dark" placement="bottom" slot="label">
            <div slot="content">打卡时间轴，不同活动需专门设置，只针对于打卡解锁活动类型</div>
            <span>
              时间轴
              <i class="el-icon-question"></i>
            </span>
          </el-tooltip>
          <el-switch v-model="ruleForm.timeAxis" active-text="开启" inactive-text="关闭" :active-value="1"
            :inactive-value="0"></el-switch>
        </el-form-item>
      </el-col>
      <!-- 时间轴按钮名称 -->
      <el-col :md="12" :sm="24" v-if="ruleForm.type=='J'">
        <el-form-item>
          <el-tooltip class="item" effect="dark" placement="bottom" slot="label">
            <div slot="content">打卡时间轴，不同活动需专门设置，只针对于打卡解锁活动类型，按钮名称</div>
            <span>
              按钮名称
              <i class="el-icon-question"></i>
            </span>
          </el-tooltip>
          <el-input v-model="ruleForm.timeAxisName" style="width:90%"></el-input>
        </el-form-item>
      </el-col>
      <!-- 主题色 v-if="mold=='H'" -->
      <el-col :md="12" :sm="24">
        <el-form-item label="主题色" prop="region">
          <el-color-picker v-model="ruleForm.subjectColor" show-alpha></el-color-picker>
        </el-form-item>
      </el-col>
      <!-- 是否显示在小程序 -->
      <el-col :md="12" :sm="24" v-if="mold=='S'">
        <el-form-item label="小程序显示">
          <el-switch v-model="ruleForm.state" active-text="显示" inactive-text="不显示" :active-value="0"
            :inactive-value="1"></el-switch>
        </el-form-item>
      </el-col>
      <!-- 地图轨迹下载 -->
      <el-col :md="12" :sm="24" v-if="mold=='S'">
        <el-form-item label="轨迹下载">
          <el-switch v-model="ruleForm.ifDownload" active-text="开启" inactive-text="关闭" :active-value="1"
            :inactive-value="0"></el-switch>
        </el-form-item>
      </el-col>
      <!-- 选手扫码打卡 -->
      <el-col :md="12" :sm="24" v-if="mold=='S'">
        <el-form-item>
          <el-tooltip class="item" effect="dark" placement="bottom" slot="label">
            <div slot="content">
              用于选手自己扫码打卡，无工作人员，需在赛事数据=>站点集合信息录制完成后导出各点二维码用于打卡
            </div>
            <span>
              选手打卡
              <i class="el-icon-question"></i>
            </span>
          </el-tooltip>
          <el-switch v-model="ruleForm.ifUserScancard" active-text="开启" inactive-text="不开启" :active-value="1"
            :inactive-value="0"></el-switch>
        </el-form-item>
      </el-col>
      <!-- 是否开启赛事工作台 -->
      <el-col :md="12" :sm="24" v-if="mold=='S'">
        <el-form-item label="是否开启赛事工作台" label-width="auto">
          <el-switch v-model="ruleForm.ifScan" active-text="开启" inactive-text="不开启" :active-value="1"
            :inactive-value="0"></el-switch>
        </el-form-item>
      </el-col>
      <el-col :md="12" :sm="24" v-if="mold=='S'&&ruleForm.ifScan==1">
        <el-form-item label="扫码打卡" label-width="auto">
          <el-switch v-model="ruleForm.ifScancard" active-text="开启" inactive-text="不开启" :active-value="1"
            :inactive-value="0"></el-switch>
        </el-form-item>
      </el-col>
      <el-col :md="12" :sm="24" v-if="mold=='S'&&ruleForm.ifScan==1">
        <el-form-item label="手环打卡" label-width="auto">
          <el-switch v-model="ruleForm.ifNfc" active-text="开启" inactive-text="不开启" :active-value="1"
            :inactive-value="0"></el-switch>
        </el-form-item>
      </el-col>
      <el-col :md="12" :sm="24" v-if="mold=='S'&&ruleForm.ifUserScancard==1">
        <el-form-item label="不固定开始时间打卡" label-width="auto">
          <el-switch v-model="ruleForm.anytimeClockin" active-text="开启" inactive-text="不开启" :active-value="1"
            :inactive-value="0"></el-switch>
        </el-form-item>
      </el-col>
      <!-- 赛事首页简介 -->
      <el-col v-if="mold=='S'">
        <el-form-item>
          <el-tooltip class="item" effect="dark" placement="bottom" slot="label">
            <div slot="content">赛事首页基本信息简介</div>
            <span>
              首页简介
              <i class="el-icon-question"></i>
            </span>
          </el-tooltip>
          <el-input v-model="ruleForm.basicIntroduce" style="width:90%;" type="textarea"
            :autosize="{ minRows: 2, maxRows: 4}" maxlength="150" show-word-limit></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <div class="head">简介信息</div>
    <el-tabs v-model="ActEditor" @tab-click="toggleIntroduce">
      <el-tab-pane :label="mold=='S'?'赛事介绍':'活动介绍'" name="1"></el-tab-pane>
      <el-tab-pane label="报名信息" name="2"></el-tab-pane>
      <el-tab-pane label="免责声明" name="3"></el-tab-pane>
    </el-tabs>
    <RichTxt ref="editor"></RichTxt>
    <el-button type="primary" class="saveBtn" @click="saveEdit">保存</el-button>
    <el-dialog title="延期通知公告绑定" :visible.sync="delayAlert" width="80%" :show-close="false"
      :close-on-press-escape="false" :close-on-click-modal="false">
      <el-radio-group v-model="delayId">
        <div v-for="v,i in allNotice" :key="i" class="noticeArr">
          <el-radio :label="v.id" @click.native.prevent="onRadioChange(v.id)">{{v.noticeTitle}}</el-radio>
        </div>
      </el-radio-group>
      <div slot="footer" class="dialog-footer">
        <el-button @click="delayAlertClose">取 消</el-button>
        <el-button type="primary" @click="delayAlertsure">确 定</el-button>
      </div>
    </el-dialog>
  </el-form>
</template>

<script>
  //富文本
  import RichTxt from "../../../components/editor/editor";
  // 地区
  import areaList from "../../../assets/area.json";
  var oldActEditor = "1";

  export default {
    components: {
      RichTxt
    },
    data() {
      return {
        loading: false,
        ActEditor: "1",
        msg: "",
        AreaList: [],
        ruleForm: {
          orgId: "",
          type: "", //类型
          name: "", //名称
          matchDate: "", //开始时间
          matchEndDate: "", //结束时间
          place: "", //赛事地点 省市区
          matchInfo: [{
            name: "",
            id: 0
          }], // 组别
          scale: "", //规模
          ponsor: "", //主办单位
          coSponsored: "", //联合主办
          organizer: "", //承办单位
          operation: "",
          logo: "", //logo
          banner: "", //banner
          introduce: "",
          signUpIntroduce: "",
          disclaimer: "",
          ifGradeAudit: "",
          timeAxis: 0,
          timeAxisName: "",
          subjectColor: "rgba(22,201,93,1)",
          ifDelayShow: 0,
          ifDelay: 0,
          delayInfo: "",
          state: 0,
          ifScan: 0,
          ifScancard: 0,
          ifUserScancard:0,
          ifNfc: 0,
          anytimeClockin:2,
          ifDownload: 0,
          conductCount: 0,
          basicIntroduce: "",
        },
        rules: {
          type: [{
            required: true,
            message: "请选择类型",
            trigger: "change"
          }],
          name: [{
            required: true,
            message: "请输入名称",
            trigger: "blur"
          }],
        },
        mold: "",
        typeArr: [],
        start_end_date: "", //起止时间
        upLoadUrl: this.$url + "/sbr/match/uploadImg",
        delayAlert: false,
        allNotice: [], // 所有公告
        delayId: "", // 延期公告id
      };
    },
    methods: {
      // 省市区选择
      getArea() {
        // 获取JSON省市地区
        let area = areaList.data;
        // console.log(area);
        area.forEach((d) => {
          let objA = {};
          objA.value = d.city_name;
          objA.label = d.city_name;
          if (d.cityArr) {
            objA.children = [];
            d.cityArr.forEach((v) => {
              let objB = {};
              objB.value = v.city_name;
              objB.label = v.city_name;
              if (v.areaArr && v.areaArr.length > 0) {
                objB.children = [];
                v.areaArr.forEach((r) => {
                  let objC = {};
                  objC.value = r.city_name;
                  objC.label = r.city_name;
                  objB.children.push(objC);
                });
              }
              objA.children.push(objB);
            });
          }
          this.AreaList.push(objA);
        });
        // console.log(this.AreaList);
      },
      // 获取类型
      getType() {
        this.$axios.get("/sbr/match/getMatchTypeList").then((res) => {
          let rr = res.data.data;
          this.typeArr = rr.filter((v) => {
            return v.state == this.mold;
          });
          this.getMatch();
        });
      },
      toggleIntroduce(tab, event) {
        // console.log(tab, event);
        // console.log(this.$refs.editor.content)
        if (oldActEditor == this.ActEditor) {
          return false;
        } else {
          let that = this;
          that.$refs.editor.editorLoad = true;
          setTimeout(() => {
            if (oldActEditor == "1") {
              that.ruleForm.introduce = that.$refs.editor.content;
            } else if (oldActEditor == "2") {
              that.ruleForm.signUpIntroduce = that.$refs.editor.content;
            } else if (oldActEditor == "3") {
              that.ruleForm.disclaimer = that.$refs.editor.content;
            }
            oldActEditor = that.ActEditor;
          }, 300);
          // this.$refs.editor.content = "";
          setTimeout(() => {
            that.editorFixed(1);
            that.$refs.editor.editorLoad = false;
          }, 500);
        }
      },
      picSuccess(i, v) {
        if (i == 1) this.ruleForm.logo = v.data.filePath;
        else if (i == 2) this.ruleForm.banner = v.data.filePath;
      },
      beforeUpload(i, file) {
        // if (i == 1 && this.ruleForm.logo) {
        //   let pp = this.ruleForm.logo.split("/");
        //   pp = this.$Base64.encode(pp[pp.length - 1]);
        //   this.$axios.get("/sbr/match/delImg?fileName=" + pp);
        // } else if (i == 2 && this.ruleForm.banner) {
        //   let pp = this.ruleForm.banner.split("/");
        //   pp = this.$Base64.encode(pp[pp.length - 1]);
        //   this.$axios.get("/sbr/match/delImg?fileName=" + pp);
        // }
        const isJPG = file.type === "image/jpeg";
        const isLt1M = file.size / 1024 / 1024 < 1;

        if (!isJPG) {
          this.$message.error("上传图片只能是 JPG 格式!");
        }
        if (!isLt1M) {
          this.$message.error("上传图片大小不能超过 1MB!");
        }
        return isJPG && isLt1M;
      },
      editorFixed(i) {
        // console.log(i)
        let that = this;
        if (i == 1) {
          if (that.ActEditor == "1") {
            that.$refs.editor.content = that.ruleForm.introduce;
          } else if (that.ActEditor == "2") {
            that.$refs.editor.content = that.ruleForm.signUpIntroduce;
          } else if (that.ActEditor == "3") {
            that.$refs.editor.content = that.ruleForm.disclaimer;
          }
          this.$forceUpdate();
        } else if (i == 2) {
          if (this.ActEditor == "1") {
            this.ruleForm.introduce = this.$refs.editor.content;
          } else if (this.ActEditor == "2") {
            this.ruleForm.signUpIntroduce = this.$refs.editor.content;
          } else if (this.ActEditor == "3") {
            this.ruleForm.disclaimer = this.$refs.editor.content;
          }
        }
      },
      getMatch() {
        let tmpId = sessionStorage.getItem("MandA");
        this.$axios.get("/sbr/match/getMatchById/" + tmpId).then((res) => {
          let rr = res.data.data;
          this.start_end_date = [rr.matchDate, rr.matchEndDate];
          if (rr.place) rr.place = rr.place.split("/");
          rr.scale = rr.scale == 0 ? "" : rr.scale;
          if (rr.matchInfo.length == 0) rr.matchInfo.push({
            name: "",
            id: 0
          });
          if (!rr.timeAxis) rr.timeAxis = 0;
          if (rr.ifDelay != 0) {
            rr.ifDelayShow = 1;
            this.delayId = rr.ifDelay;
            if (rr.ifDelay < 0) this.delayId = "";
          } else rr.ifDelayShow = 0;
          this.ruleForm = rr;
          this.editorFixed(1);
          this.$nextTick(() => {
            let divTop = document.getElementsByClassName("contentWrap")[0];
            divTop.scrollTop = 0;
          });
        });
      },
      saveEdit() {
        this.editorFixed(2);
        this.$refs["ruleForm"].validate((valid) => {
          if (valid) {
            if (!this.start_end_date) {
              this.$message.error("请设置起止时间");
              return false;
            }
            let mg = this.ruleForm.matchInfo.filter((v) => {
              return v.name == "";
            });
            if (mg.length == this.ruleForm.matchInfo.length) {
              this.$message.error("请设置组别");
              return false;
            }
            if (!this.ruleForm.logo) {
              this.$message.error("请选择logo");
              return false;
            }
            if (!this.ruleForm.banner) {
              this.$message.error("请选择宣传图");
              return false;
            }
            this.ruleForm.matchDate = this.start_end_date[0];
            this.ruleForm.matchEndDate = this.start_end_date[1];
            if (this.ruleForm.place)
              this.ruleForm.place = this.ruleForm.place.join("/");
            this.ruleForm.matchInfo = this.ruleForm.matchInfo.filter((v) => {
              return v.name != "";
            });
            this.loading = true;
            // 提交
            // if (this.mold == "match") {
            // } else if (this.mold == "act") {
            // }
            let that = this;
            setTimeout(() => {
              that.putMA();
            }, 300);
          } else {
            // console.log("error submit!!");
            this.$message.error("请完善基本信息");
            return false;
          }
        });
      },
      putMA() {
        this.$axios.post("/sbr/match/putMatch", this.ruleForm).then((res) => {
          // let rr = res.data.data;
          this.loading = false;
          this.$message.success("修改成功");
          this.getMatch();
        });
      },
      delayChange() {
        console.log(this.ruleForm.ifDelayShow);
        if (this.ruleForm.ifDelayShow == 0) this.ruleForm.ifDelay = 0;
        else {
          this.delayAlert = true;
        }
      },
      // 获取所有公告
      getNotice() {
        this.$axios
          .get(
            "/sbr/notice/getMatchNoticeByMatchId/" +
            sessionStorage.getItem("MandA")
          )
          .then((res) => {
            let rr = res.data.data;
            this.allNotice = rr;
          });
      },
      // 取消延期公告弹框
      delayAlertClose() {
        // console.log(!this.delayId&&!this.ruleForm.ifDelay==0,this.delayId,this.ruleForm.ifDelay)
        if (!this.delayId || this.ruleForm.ifDelay == 0) {
          this.ruleForm.ifDelayShow = 0;
          this.ruleForm.ifDelay = -1;
        }
        this.delayAlert = false;
      },
      // 确定延期公告
      delayAlertsure() {
        // -1 代表开启但未绑定公告 即：首页不弹出
        console.log(this.delayId);
        if (!this.delayId) {
          // this.$message("请选择需绑定的公告");
          this.ruleForm.ifDelay = -1;
        } else {
          this.ruleForm.ifDelay = this.delayId;
        }
        this.delayAlert = false;
      },
      onRadioChange(e) {
        // 当点击已经选中的把 activeModel 置空，就是取消选中，并返回
        if (this.delayId === e) {
          this.delayId = "";
          return;
        }
        // 不是选中，选中当前点击 Radio
        this.delayId = e;
        // 选中操作
      },
    },
    created() {
      this.mold = this.$Base64.decode(sessionStorage.getItem("mold"));
      this.getType();
      this.getArea();
      this.getNotice();
    },
  };
</script>
<style scoped>
  /* @import url(); 引入公共css类 */
  .head {
    font-size: 18px;
    color: #303133;
  }

  .avatar-uploader>>>.el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader>>>.el-upload:hover {
    border-color: #409eff;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 150px;
    height: 150px;
    line-height: 150px;
    text-align: center;
  }

  .avatar {
    width: 150px;
    height: 150px;
    display: block;
  }

  .tips {
    font-size: 12px;
    float: left;
    line-height: 1.2;
  }

  .avatar-uploader.banner>>>.el-upload {
    height: 123px !important;
  }

  .banner {
    width: 200px !important;
    height: 123px !important;
    line-height: 123px !important;
  }

  .saveBtn {
    margin: 15px auto 0;
    display: block;
  }

  .noticeArr {
    height: 40px;
    line-height: 40px;
  }
</style>